"use client";

import { useLanguage } from "~/lib/LanguageContext";
import { type Language } from "~/lib/i18n";

export function LanguageToggle() {
  const { language, setLanguage, t } = useLanguage();

  const toggleLanguage = () => {
    const newLanguage: Language = language === "en" ? "zh" : "en";
    setLanguage(newLanguage);
  };

  return (
    <button
      onClick={toggleLanguage}
      className="flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium text-black transition-all duration-300 hover:bg-blue-100 hover:text-blue-600 dark:text-white dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
      aria-label={language === "en" ? "Change to Chinese" : "Change to English"}
    >
      <span className="relative flex items-center justify-center">
        <span className={`transform transition-all duration-300 ${language === "en" ? "opacity-100" : "absolute opacity-0"}`}>
          中文
        </span>
        <span className={`transform transition-all duration-300 ${language === "zh" ? "opacity-100" : "absolute opacity-0"}`}>
          EN
        </span>
      </span>
    </button>
  );
} 